import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';

import { DatasetSearchModeEnum, DatasetSearchModeMap } from '@/common/types/dataset/dataset';
import Iconify from '@/components/icon/iconify-icon';
import { useSystemStore } from '@/store/useSystemStore';
import { getWebLLMModel } from '@/utils/system/utils';

function SearchParamsTip({
  searchMode,
  similarity = 0,
  limit = 1500,
  responseEmptyText,
  usingReRank = false,
  datasetSearchUsingExtensionQuery,
  queryExtensionModel,
}: {
  searchMode: `${DatasetSearchModeEnum}`;
  similarity?: number;
  limit?: number;
  responseEmptyText?: string;
  usingReRank?: boolean;
  datasetSearchUsingExtensionQuery?: boolean;
  queryExtensionModel?: string;
}) {
  const { t } = useTranslation();
  const { reRankModelList } = useSystemStore();

  const hasReRankModel = reRankModelList.length > 0;
  const hasEmptyResponseMode = responseEmptyText !== undefined;
  const hasSimilarityMode = usingReRank || searchMode === DatasetSearchModeEnum.embedding;

  const extensionModelName = useMemo(
    () =>
      datasetSearchUsingExtensionQuery ? getWebLLMModel(queryExtensionModel)?.name : undefined,
    [datasetSearchUsingExtensionQuery, queryExtensionModel],
  );

  return (
    <div className="rounded-lg">
      {
        <div className="space-y-2">
          {/* Search Mode */}
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <span className="font-medium text-gray-700">检索模式</span>
            </div>
            <div className="text-green-800 rounded-full bg-orange-200 px-3 py-1 text-sm font-medium">
              {DatasetSearchModeMap[searchMode]?.icon && (
                <Iconify
                  icon={DatasetSearchModeMap[searchMode]?.icon}
                  size="12px"
                  className="mr-1"
                />
              )}
              {t(DatasetSearchModeMap[searchMode]?.title as any)}
            </div>
          </div>

          {/* Token Limit */}
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <span className="font-medium text-gray-700">Tokens上限</span>
            </div>
            <div className="rounded-full bg-primary-700 px-3 py-1 text-sm font-medium text-blue-500">
              {limit}
            </div>
          </div>

          {/* Minimum Relevance */}
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <span className="font-medium text-gray-700">最低相关度</span>
            </div>
            <div className="text-green-800 rounded-full bg-green-100 px-3 py-1 text-sm font-medium">
              {hasSimilarityMode ? similarity : t('core.dataset.search.Nonsupport')}
            </div>
          </div>

          {/* Result Reranking */}
          {hasReRankModel && (
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <span className="font-medium text-gray-700">{t('core.dataset.search.ReRank')}</span>
              </div>
              <div className="text-green-800 rounded-full px-3 py-1 text-sm font-medium">
                {usingReRank ? '✔️' : '❌'}
              </div>
            </div>
          )}

          {/* Question Completion */}
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <span className="font-medium text-gray-700">
                {t('core.module.template.Query extension')}
              </span>
            </div>
            <div
              className={`rounded-full px-3 py-1 text-sm font-medium ${
                extensionModelName ? 'bg-pink-100' : ''
              }`}
            >
              {extensionModelName || '❌'}
            </div>
          </div>

          {hasEmptyResponseMode && (
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <span className="font-medium text-gray-700">
                  {t('core.dataset.search.Empty result response')}
                </span>
              </div>
              <div className="text-green-800 rounded-full px-3 py-1 text-sm font-medium">
                {responseEmptyText !== '' ? '✔️' : '❌'}
              </div>
            </div>
          )}
        </div>
      }
    </div>
  );
}

export default React.memo(SearchParamsTip);
